<template>
  <div>
    <proposer></proposer>
    <div class="header">
      您共收藏了{{arr.length}}个职位
    </div>
    <div class="bottom">
      <div class="box"
           v-if="isShow">
        <i class="el-icon-star-off"></i>
        <p>还没有收藏记录哦</p>
        <p>赶快到 <span class="list"
                @click="li">职位列表</span> 去收藏吧</p>
      </div>
      <div class="cad"
           v-if="!isShow">
        <div class="card"
             v-for="(item,index) in arr"
             :key=index>
          <div class="quxiao"
               @click="dle(index)">X</div>
          <div class="card-top">{{item.position}}</div>
          <div class="card-cen">
            <div class="cen-lt">
              <i class="el-icon-location-outline"></i>
              {{item.site}}
            </div>
            <div class="cen-rt">
              <i class="el-icon-time"></i>
              {{item.time}}
            </div>
          </div>
          <div class="card-fot">
            <i class="el-icon-s-data"></i>
            {{item.sort}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast } from 'vant';
import proposer from '@/components/proposer'
Vue.use(Toast);
export default {
  data () {
    return {
      isShow: "",
      arr: [
        {
          position: "安全技术高级工程师",
          site: "广东/东莞",
          time: "2021-12-17",
          sort: "云服务族"
        },
        {
          position: "安全技术高级工程师",
          site: "广东/东莞",
          time: "2021-12-17",
          sort: "云服务族"
        },
        {
          position: "安全技术高级工程师",
          site: "广东/东莞",
          time: "2021-12-17",
          sort: "云服务族"
        },
        {
          position: "安全技术高级工程师",
          site: "广东/东莞",
          time: "2021-12-17",
          sort: "云服务族"
        },
        {
          position: "安全技术高级工程师",
          site: "广东/东莞",
          time: "2021-12-17",
          sort: "云服务族"
        },
      ]
    }
  },
  components: {
    proposer
  },
  methods: {
    li () {
      this.$router.push('/phoneindex')
    },
    pd () {
      if (this.arr.length == 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    dle (index) {
      this.arr.splice(index, 1)
      Toast({
        message: '取消成功',
        icon: 'warning-o',
      });
    }
  },
  mounted () {
    this.pd()
  }
}
</script>
<style scoped>
html,
body,
div {
  height: 100%;
}
.header {
  height: 40px;
  background: #9b0f15;
  color: #fff;
  font-size: 17px;
  line-height: 40px;
  padding-left: 25px;
}
p {
  margin: 0;
}
.bottom /deep/.el-icon-star-off {
  font-size: 60px;
  margin-bottom: 15px;
}
.list {
  text-decoration: underline;
}
.bottom p {
  font-size: 15px;
  margin-top: 5px;
}
.box {
  text-align: center;
  margin-top: 65px;
}
.card {
  border-bottom: 1px solid #e3e3e3;
  padding: 20px;
  position: relative;
}
.card-top {
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
}
.card-cen {
  font-size: 12px;
  color: #989898;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.card-fot {
  color: #989898;
  font-size: 12px;
}
.quxiao {
  height: 21px;
  width: 21px;
  border-radius: 50%;
  background: #cccccc;
  color: #fff;
  line-height: 21px;
  text-align: center;
  position: absolute;
  right: 5px;
  top: 15px;
}
</style>